<template>
  <!-- 退租流程页 -->
  <div class="throwLeaseStepsPage">
    <ul class="StepsUlBox">
      <li
        v-for="(n, i) in stepData.list"
        :class="[n.active ? 'active' : 'defualtLH', (n.active && n.title === '确认并提交&') ? 'defualtLH' : 'thirdLH']"
        :key="i"
      >
        {{ n.title.split("&")[0] }}
        <span
          v-if="n.active"

          style="font-size: 12px; opacity: 0.8; font-family: SourceHanSans;"
          >{{ n.title.split("&")[1] }}</span
        >
      </li>
    </ul>
    <component
      :is="whichComponent"
      ref="stepCompnent"
      @nextStep="changeComponent"
    ></component>
  </div>
</template>

<script setup>
import { reactive, ref, shallowRef } from "vue";
import FirstStep from "./components/firstStep.vue";
import SecondStep from "./components/secondStep.vue";
import ThirdStep from "./components/thirdStep.vue";

// 头部步骤条
const stepData = reactive({
  currentIndex: 0,
  list: [
    {
      title: "填充合同内容&参数设置处输入合同内容",
      active: true,
    },
    {
      title: "编辑合同内容&编辑文本以调节合同内容条目",
      active: false,
    },
    {
      title: "确认并提交&",
      active: false,
    },
  ],
});

// 各step组件
// 此名称必须与子组件中的ref值名称保持一致才能获取到子组件中的方法
let stepCompnent = ref(null);
let whichComponent = shallowRef(FirstStep);

// 组件切换
const changeComponent = (val) => {
  if (val === "GoPreview") {
    // 显示第一步
    whichComponent.value = FirstStep;
    stepData.list[0].active = true;
    stepData.list[1].active = false;
    stepData.list[2].active = false;
    return;
  }
  if (val === "GoEdit") {
    // 显示第二步
    whichComponent.value = SecondStep;
    stepData.list[0].active = false;
    stepData.list[1].active = true;
    stepData.list[2].active = false;
    return;
  }
  // 显示第三步
  whichComponent.value = ThirdStep;
  stepData.list[0].active = false;
  stepData.list[1].active = false;
  stepData.list[2].active = true;
};
</script>

<style lang="scss" scoped>
$backgroundColor: #f7f7fa;
.throwLeaseStepsPage {
  .StepsUlBox {
    height: 78px;
    padding-left: 0;
    display: flex;
    justify-content: center;
    li {
      width: 242px;
      padding: 8px 0 0 0;
      line-height: 71px;
      background: $backgroundColor;
      display: inline-block;
      color: #fff;
      position: relative;
      // float: left;
      font-size: 20px;
      font-family: SourceHanSansMedium;
      color: #999999;
      text-align: center;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      // cursor: pointer;
      &::after {
        content: "";
        display: block;
        border-top: 39px solid transparent;
        border-bottom: 39px solid transparent;
        border-left: 39px solid $backgroundColor;
        position: absolute;
        right: -38.5px;
        top: 0;
        z-index: 10;
      }
      &::before {
        content: "";
        display: block;
        border-top: 39px solid $backgroundColor;
        border-bottom: 39px solid $backgroundColor;
        border-left: 39px solid #fff;
        position: absolute;
        left: 0px;
        top: 0;
      }
      &:first-child {
        border-radius: 4px 0 0 4px;
        // padding-left: 25px;
        &::before {
          display: none;
        }
      }
      &:last-child {
        &::after {
          display: none;
        }
      }
      &.active {
        background-color: #ff7b50;
        color: #ffffff;
        // line-height: 35px;
        &::after {
          border-left-color: #ff7b50;
        }
        &::before {
          border-top-color: #ff7b50;
          border-bottom-color: #ff7b50;
        }
      }
      &.thirdLH {
        line-height: 35px;
      }
      &.defualtLH {
        line-height: 70px;
      }
    }
  }
}
</style>
